<template>
  <div>
    <h1>event</h1>
    <!-- 
      知识点：
            1、事件对象 event 的数据类型声明 ： MouseEvent；
            2、hooks (模块)就是将具有特定功能的一段代码封装起来，什么时候用，什么时候调用  模块复用功能
                  (1)创建hooks：在 src 文件夹下创建 hooks 文件夹；
                  (2)创建模块：
                            hook文件的命名规则  usexxx.ts    起的文件名'xxx'一定要有含义
                            文件里面使用 es6 模块化语法
      需求：获取 鼠标点击页面的 当前位置的坐标
      解析：
            通过 页面点击事件 中 event事件对象 中 pageX和pageY 得到坐标。
            (1)页面点击事件 addEventListener()
            (2)event事件对象  e:MouseEvent 事件对象的类型声明：MouseEvent
            (3)pageX和pageY   
     -->
    <h1>当前位置的x坐标：{{ x }}</h1>
    <h1>当前位置的y坐标：{{ y }}</h1>

  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import useGetMousePosition from './hooks/useGetMousePosition'

export default defineComponent({

  setup() {
    //获取x y
    console.log(useGetMousePosition())//{x: RefImpl, y: RefImpl}  x和y的值是ref对象
    let { x, y } = useGetMousePosition()

    //自定义hook 
    //hook的作用 模块  就是将具有特定功能的一段代码封装起来，什么时候用，什么时候调用  模块复用功能

    return {
      x,
      y
    }
  }
})
</script>

<style scoped>

</style>